<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--
2017年6月12日 姜延鹏
Created by JiangYanpeng
Date: 2017年6月12日 16:38:45
Version: 1.0
停车位选择页面
--%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery图像缩放</title>
    <link rel="stylesheet" href="/static/sign/js/jquery.iviewer.css"/>
    <style>
        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .viewer
        {
            height: 100%;
            position: relative;
            background-color: lightgreen;
        }

        .wrapper
        {
            border: 1px solid black;

            position: absolute;
            top: 5em;
            left: 1em;
            bottom: 1em;
            right: 1em;

            overflow: hidden; /*for opera*/
        }

        .toolbar
        {
            border: 1px solid black;
            position: absolute;
            top: 1em;
            left: 1em;
            right: 1em;
            height: 3em;
        }

    </style>

    <script type="text/javascript" src="/static/sign/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="/static/sign/js/jquery.iviewer.js"></script>
    <script type="text/javascript">

        function getX(obj){
            var parObj=obj;
            var left=obj.offsetLeft;
            while(parObj=parObj.offsetParent){
                left+=parObj.offsetLeft;
            }
            return left;
        }

        function getY(obj){
            var parObj=obj;
            var top=obj.offsetTop;
            while(parObj = parObj.offsetParent){
                top+=parObj.offsetTop;
            }
            return top;
        }

        function DisplayCoord(event){
            var top,left,oDiv;
            oDiv=document.getElementById("viewer1");
            top=getY(oDiv);
            left=getX(oDiv);
            var ml = ((event.clientX-left+document.body.scrollLeft)-2);
            var mt = ((event.clientY-top+document.body.scrollTop)-2);
            var m = new Array();
            m[0]=ml;
            m[1]=mt;
            return m;
        }
        var $ = jQuery;
        function isInCircle(x, y) {
            var relative_x = x - this.x;
            var relative_y = y - this.y;
            return Math.sqrt(relative_x*relative_x + relative_y*relative_y) <= this.r;
        }

        function isInRectangle(x, y) {
            return (this.x1 <= x && x <= this.x2) && (this.y1 <= y && y<= this.y2);
        }

        function getCircleCenter() { return {x: this.x, y: this.y}; }

        function getRectangleCenter() { return {x: (this.x2+this.x1)/2, y: (this.y2+this.y1)/2}; }

        var objects = [
            {x: 0, y: 0, r: 50000000000, isInObject: isInCircle, title: 'big circle', getCenter: getCircleCenter }
        ]

        function whereIam(x, y) {
            for (var i=0; i<objects.length; i++) {
                var obj = objects[i];
                if (obj.isInObject(x, y))
                    return obj;
            }

            return null;
        }

        function showMe(a) {
            $.each(objects, function(i, object) {
                if (object.title == $(a).html()) {
                    $("#viewer1").each(function(){
                        var center = object.getCenter();
                        var offset = this.iviewer.imageToContainer(center.x, center.y);
                        var containerOffset = this.iviewer.container.offset();
                        var pointer = $('#pointer');
                        console.log(containerOffset);
                        offset.x += containerOffset.left - 20;
                        offset.y += containerOffset.top - 40;
                        pointer.css('display', 'block');
                        pointer.css('left', offset.x+'px');
                        pointer.css('top', offset.y+'px');
                    });
                }
            });
        }

        document.oncontextmenu = function(e){
            e.preventDefault();
        };//阻止鼠标右键默认事件

            var src12=$("#imgSrc").val();
            $("#viewer1").iviewer({
                src: src12,
                onClick: function(coords) {
                    var object = whereIam(coords.x, coords.y);
                    if (object)
                        $("#svg").remove();
                    /*alert('Clicked at ('+coords.x+', '+coords.y+')');*/
                    $("#zonex").val(coords.x);
                    $("#zoney").val(coords.y);
                    var mar = DisplayCoord(event);
                    for(var i=0;i<mar.length;i++)
                    {
                        var CX = mar[0]-4;
                        var CY = mar[1]-4;
                    }
                    $("#viewer1").append("<div id='svg' style='margin-left:"+CX+"px;margin-top:"+CY+"px;position: absolute;z-index: 20170614;width:10px;height:10px;border:solid 1px red;border-radius: 50%;background-color: red' ></div> ");

                },
                onMouseMove: function(coords) {
                    var object = whereIam(coords.x, coords.y);

                    if (object) {
                        $('#status').html('You are in ('+coords.x.toFixed(1)+', '+coords.y.toFixed(1)+'). This is '+object.title);
                        this.container.css('cursor', 'crosshair');
                    } else {
                        $('#status').html('You are in ('+coords.x.toFixed(1)+', '+coords.y.toFixed(1)+'). This is empty space');
                        this.container.css('cursor', null);
                    }
                },

                onBeforeDrag: function(coords) {
                    // remove pointer if image is getting moving
                    // because it's not actual anymore
                    $('#pointer').css('display', 'none');
                    // forbid dragging when cursor is whithin the object
                    return whereIam(coords.x, coords.y) ? false : true;
                },

                onZoom: function() {
                    // remove pointer if image is resizing
                    // because it's not actual anymore
                    $('#pointer').css('display', 'none');
                },

                initCallback: function() {
                    this.container.context.iviewer = this;
                }
           // });
        });
    </script>

</head>
<body>
<div class="toolbar" style="line-height: 40px;">
    <span style="text-align: center;font-size: 16px;font-family: Arial;margin-left: 30px">放大或缩小后拖动地图,左键添加标记,添加完成即可关闭</span>
</div>
<input type="hidden" id="imgSrc" value="${src}"/>
<div class="wrapper">
    <div id="viewer1" class="viewer iviewer_cursor" onclick="DisplayCoord(event)">

    </div>
    <br/>
</div>

</body>
</html>
